<!-- permission -->
<template>
  <el-tree class="per-tree" :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
           :props="defaultProps" @check-change="handleChange" :default-checked-keys="defaultCheckData"></el-tree>
</template>

<script>
import { GetAllPermissionList, GetRolePermission } from '@/api/system'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: {},
  data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultCheckData: []
    }
  },
  props: {
    roleId: {
      type: Number,
      default: null
    }
  },
  watch: {},
  computed: {
    ...mapGetters([
      'permissionTreeList'
    ])
  },
  mounted () {
    if (!this.permissionTreeList || this.permissionTreeList.length <= 0) {
      this.getPerList()
    } else {
      this.data = this.permissionTreeList
    }
    this.getUserPermission()
  },
  methods: {
    getPerList () {
      GetAllPermissionList().then(res => {
        this.data = res.data
        this.$store.dispatch('savePermissionTree', this.data)
      }).then(res => {

      })
    },
    handleChange () {
      this.$emit('getPerData', this.$refs.tree.getCheckedKeys())
    },
    getUserPermission () {
      GetRolePermission({ id: this.roleId }).then(res => {
        this.defaultCheckData = res.data.rolePermissionList
      }).catch(() => { })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
